<template>
  <div>
    <leftRightSplit :left-span="4">
      <template #left>
        <ContentWrap title="字典分类">
          <treeDic v-model="chioseDicId" :dic-id="HrItemDic.DicClassify" @change="dictChange" />
        </ContentWrap>
      </template>
      <template #right>
        <ContentWrap title="字典列表">
          <template #extr>
            <BaseButton type="success" v-hasPermi="'add'" @click="addDic">添加字典</BaseButton>
          </template>
          <div class="app-container">
            <Search
              ref="search"
              :schema="searchScheme"
              :model="queryParam"
              :is-col="false"
              layout="inline"
              :showSearch="true"
              button-position="left"
              :search-loading="loading"
              :reset-loading="loading"
              @search="handleSearch"
              @reset="handleSearch"
            />
          </div>
          <Table :data="dicts" :columns="columns" :pagination="paging" @change="loadDic">
            <template #Status="e">
              <el-switch
                v-model="e.row.Status"
                :disabled="$hasPermi('set') == false"
                :inactive-value="2"
                :active-value="1"
                @change="(value) => statusChange(e.row, value)"
              />
            </template>
            <template #IsSysDic="e">
              <span v-if="e.row.IsSysDic">是</span>
              <span v-else>否</span>
            </template>
            <template #IsTreeDic="e">
              <span v-if="e.row.IsTreeDic">是</span>
              <span v-else>否</span>
            </template>
            <template #action="e">
              <BaseButton
                size="small"
                type="primary"
                title="字典项"
                :icon="boxIcon"
                circle
                @click="show(e.row)"
              />
              <BaseButton
                v-hasPermi="'set'"
                v-if="e.row.IsSysDic == false"
                size="small"
                type="warning"
                title="编辑字典"
                :icon="editIcon"
                circle
                @click="edit(e.row)"
              />
              <BaseButton
                v-hasPermi="'delete'"
                v-if="e.row.IsSysDic == false && e.row.Status == 0"
                size="small"
                type="danger"
                title="删除字典"
                :icon="dropIcon"
                circle
                @click="dropDic(e.row)"
              />
            </template>
          </Table>
        </ContentWrap>
      </template>
    </leftRightSplit>
    <editDic :id="dicId" v-model:visible="visable" @close="close" />
    <dictItem :dic-id="dicId" v-model:visible="itemVisable" :dic-name="dicName" @close="close" />
    <treeDicItem :dic-id="dicId" v-model:visible="treeVisable" :dic-name="dicName" @close="close" />
  </div>
</template>

<script>
import * as dictApi from '@/api/base/dict'
import { HrEnumDic, HrItemDic } from '@/config/publicDic'
import { treeDic } from '@/components/base/'
import { Table } from '@/components/Table'
import { useIcon } from '@/hooks/web/useIcon'
import { Search } from '@/components/Search'
import editDic from './components/editDic.vue'
import dictItem from './dicItem.vue'
import treeDicItem from './treeDicItem.vue'
export default {
  components: {
    treeDic,
    Table,
    Search,
    editDic,
    dictItem,
    treeDicItem
  },
  data() {
    return {
      HrItemDic,
      dicts: [],
      loading: false,
      dropIcon: useIcon({ icon: 'ep:delete' }),
      editIcon: useIcon({ icon: 'ep:edit' }),
      boxIcon: useIcon({ icon: 'ep:box' }),
      searchScheme: [
        {
          field: 'QueryKey',
          label: '字典名',
          component: 'Input',
          componentProps: {
            maxLength: 50,
            placeholder: '字典名'
          }
        },
        {
          field: 'Status',
          label: '状态',
          component: 'EnumItem',
          componentProps: {
            multiple: true,
            dicKey: HrEnumDic.dicStatus,
            placeholder: '字典状态'
          }
        },
        {
          field: 'IsSysDic',
          label: '是否为系统字典',
          component: 'Switch',
          componentProps: {}
        },
        {
          field: 'IsTreeDic',
          label: '是否为树形字典',
          component: 'Switch',
          componentProps: {}
        }
      ],
      dicId: null,
      chioseDicId: null,
      treeVisable: false,
      visable: false,
      itemVisable: false,
      dicName: null,
      queryParam: {
        Classify: null,
        QueryKey: null,
        Status: [],
        IsSysDic: null,
        IsTreeDic: null
      },
      columns: [
        {
          sortby: 'Id',
          field: 'Id',
          label: '字典码',
          align: 'center',
          minWidth: 120,
          sortable: 'custom'
        },
        {
          sortby: 'DicName',
          field: 'DicName',
          label: '字典名',
          align: 'center',
          minWidth: 150,
          sortable: 'custom'
        },
        {
          field: 'Remark',
          label: '备注',
          align: 'left',
          minWidth: 200
        },
        {
          sortby: 'Status',
          field: 'Status',
          label: '状态',
          align: 'center',
          slotName: 'Status',
          minWidth: 100,
          sortable: 'custom'
        },
        {
          sortby: 'IsSysDic',
          field: 'IsSysDic',
          label: '是否为系统字典',
          align: 'center',
          slotName: 'IsSysDic',
          minWidth: 100,
          sortable: 'custom'
        },
        {
          sortby: 'IsTreeDic',
          field: 'IsTreeDic',
          label: '是否是树形字典',
          align: 'center',
          minWidth: 100,
          slotName: 'IsTreeDic',
          sortable: 'custom'
        },
        {
          field: 'ItemNum',
          label: '字典项数',
          align: 'right',
          minWidth: 100
        },
        {
          field: 'Action',
          label: '操作',
          align: 'left',
          fixed: 'right',
          width: '140px',
          slotName: 'action'
        }
      ],
      paging: {
        pageSize: 10,
        total: 0,
        currentPage: 1
      }
    }
  },
  mounted() {
    this.reset()
  },
  methods: {
    dictChange(e) {
      this.queryParam.Classify = this.chioseDicId
      this.reset()
    },
    handleSearch(data) {
      this.queryParam.QueryKey = data.QueryKey
      this.queryParam.Status = data.Status
      this.queryParam.IsSysDic = data.IsSysDic
      if (!this.queryParam.IsSysDic) {
        delete this.queryParam.IsSysDic
      }
      this.queryParam.IsTreeDic = data.IsTreeDic
      if (!this.queryParam.IsTreeDic) {
        delete this.queryParam.IsTreeDic
      }
      this.loadDic()
    },
    addDic() {
      this.dicId = null
      this.visable = true
    },
    edit(row) {
      this.dicId = row.Id
      this.visable = true
    },
    show(row) {
      this.dicId = row.Id
      this.dicName = row.DicName
      if (row.IsTreeDic) {
        this.treeVisable = true
      } else {
        this.itemVisable = true
      }
    },
    close(isRefresh) {
      if (isRefresh) {
        this.reset()
      }
    },
    async statusChange(row, value) {
      if (value === 1) {
        await dictApi.Enable(row.Id)
      } else {
        await dictApi.Stop(row.Id)
      }
      this.$message({
        type: 'success',
        message: '设置成功!'
      })
      // eslint-disable-next-line require-atomic-updates
      row.Status = value
    },
    dropDic(row) {
      const title = '确认删除字典 ' + row.DicName + '?'
      this.$confirm(title, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.submitDrop(row.Id)
      })
    },
    async submitDrop(id) {
      await dictApi.DeleteDic(id)
      this.$message({
        type: 'success',
        message: '删除成功!'
      })
      this.loadDic()
    },
    reset() {
      this.queryParam.QueryKey = null
      this.queryParam.Status = []
      this.queryParam.IsSysDic = null
      this.queryParam.IsTreeDic = null
      this.loadDic()
    },
    async loadDic(curPaging) {
      if (curPaging == null) {
        curPaging = {
          Size: this.paging.pageSize,
          Index: 1,
          SortName: 'Id',
          IsDesc: true
        }
        this.paging.currentPage = 1
      }
      const res = await dictApi.query(this.queryParam, curPaging)
      this.dicts = res.List
      this.paging.total = res.Count
    }
  }
}
</script>
